<template>
    <div>
        <mt-header class="m_home_header" title="历史记录">
            <router-link to="/m/manage-wallet" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <div class="manage_wallet_top">
            <div>
                <p>历史累计收益(WE)</p>
                <p>{{fundTotal}}</p>
            </div>
        </div>
        <div class="manage_record_list_div">
            <template v-if="fundHistoryData.length == 0">
                <p style="text-align: center;margin: 1rem 0;">暂无数据</p>
            </template>
            <template v-else>
                <template v-for="fund in fundHistoryData">
                    <div class="manage_record_list" @click="rowClick(fund)">
                        <div>
                            <p>【{{fund.product.name}}】</p>
                            <p>{{fund.userFund.endTime}}</p>
                        </div>
                        <div>
                            <p>到期收益</p>
                            <p>{{fund.userFund.money}} WE</p>
                        </div>
                    </div>
                </template>
            </template>
        </div>

    </div>
</template>

<script>
    export default {
        name: "ManageRecord",
        data() {
            return {
                fundTotal: 0,
                fundHistoryData: [],
            }
        },
        mounted() {
            this.requestGetManageHistory();
        },
        methods: {
            requestGetManageHistory() {
                this.requestAxios.requestWeb('post', webUserBalanceApi + '/get_fund_history.do', null, (response) => {
                    let fundTotal = 0;
                    for (let i = 0; i < response.data.length; i++) {
                        fundTotal += response.data[i].userFund.money;
                    }
                    this.fundTotal = fundTotal;
                    this.fundHistoryData = response.data;
                    console.log(response)
                })
            },
            rowClick(fund) {
                // console.log(fund)
                let query = {
                    product:fund.product.name,
                    money:fund.userFund.money,
                    amount:fund.userFund.amount,
                    createTime:fund.userFund.createTime,
                    endTime:fund.userFund.endTime,

                };
                this.$router.push({path: '/m/manage-details', query: query})
            },
        }
    }
</script>

<style>


    .manage_record_list_div {
        margin-top: .3rem;
        padding: 0 .3rem;
        border-top: 1px solid #ecedf6;
        border-bottom: 1px solid #ecedf6;
        background: #fff;
    }

    .manage_record_list_div .manage_record_list:last-child {
        border-bottom: 0;
    }

    .manage_record_list {
        background: #fff;
        border-bottom: 1px solid #ecedf6;
        padding: .1rem 0;
    }

    .manage_record_list > div {
        display: flex;
        justify-content: space-between;
    }

    .manage_record_list > div p:last-child {
        color: #999;
    }

    .manage_record_list > div:last-child p:last-child {
        color: #f2a567;
    }


</style>
